-
首先 模板 对应着的 .vue文件 的 <template> </template> 部分 ,表示的含义是对视图的描述。在 Vue 的设计哲学中,视图 和 数据 是两个部分,数据驱动视图的变化。所以 模板 对应的是具体的描述,描述的主体是当前 Vue实例 的视图部分。
-
而 组件 是一个抽象的概念,对应着一个 .vue 文件。每一个 Vue实例 都可以是一个 组件 ,因为所有的组件最终都要挂载在 app.vue 上,所以可以说 整个Vue工程都是一个组件 。
-
从 Vue官方教程 中可以看到,组件本质上是有预定义选项的 Vue实例,组件具有的特征是 小型,独立,通常可复用。
-
再来看问题:模板是对视图的描述,组件是抽象概念,Vue组件是拥有预定义选项的Vue实例。
-
既然 模板是对视图的描述 ,那么 这个 Vue实例 中 部分视图 如果跟组件所描述的视图相同,我们就可以 使用组件来代替这部分视图, 这个就称为 可复用。 当你发现 视图大同小异,而刚好我们可以通过一些手段控制这些细小的差异,利用 Props 使得组件表现出细微的差别,那么利用 Props(预定义选项) 让组件表现不同的视图。我们可以称之为:UI组件 或者 木偶组件。
-
同时我们还知道,Vue实例中除了视图还有逻辑处理,如果组件的这部分的逻辑处理也能被复用。举例为一个弹窗,弹窗应该具备 标题, 取消按钮 , 确认按钮 , 遮蔽层 。可以发现,所有的弹窗,都要求 点击取消按钮,弹窗消失, 点击确认按钮,执行某些操作 。这种逻辑处理和视图,都是可以通过 props 被复用的。 我们可以称之为:功能组件 或者 智能组件。
-
所以组件和模板是两个维度的概念,尽管他们的关系是相互的,组件里面可以用 模板描述组件的视图。同时模板也可以直接 使用组件描述部分视图 。
-
要想用好他们,需要理解他们的概念,根据不同的业务场景细分不同的情况。包括我对组件的划分,其实只是在某些场景下适用。